<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css?v=3">
        <title>TypeScript</title>
    </head>
    <body>
        <h1>TypeScript</h1>
        <nav>
            <ul>
                <li><a href="#compiler">1 编译器</a></li>
                <li><a href="#config">2 TSConfig</a></li>
                <li><a href="#declaration-spaces">3 声明空间</a></li>
                <li><a href="#modules">4 模块</a></li>
            </ul>
        </nav>


        <p>TypeScript 是一种带类型系统的 JavaScript。在浏览器中运行的依然是普通的 JavaScript。要使用 TypeScript，需要安装 <a href="#tsc">TypeScript 编译器</a></p>
        <p>TypeScript 类型系统的特点：</p>
        <ul>
            <li>类型可以是隐含的。TypeScript 会尽可能推断类型</li>
            <li>通过类型标注添加明确类型，帮助编译器确定类型</li>
            <li>类型是结构化的，即鸭子类型</li>
            <li>类型错误不会妨碍输出 JavaScript</li>
            <li>可以使用 <code>declare</code> 声明类型，不做具体实现</li>
            <li>不同类型数值不能做相等性 <code>==</code> 判断，会报错</li>
        </ul>

        <h2 id="compiler">1 编译器</h2>
        <p>
            可以使用 npm 安装 TypeScript 编译器：
        </p>
<pre>
$ npm install -g typescript

# 检查安装是否正常
$ tsc --version

# 查看选项
$ tsc --help
</pre>

        <h2 id="config">2 tsconfig.json</h2>
        <p><code>tsconfig.json</code> 用于控制 TypeScript 的行为。</p>
<pre>{
    // 设定基础配置
    <a href="https://www.typescriptlang.org/tsconfig#extends" target="_blank">"extends"</a>: "@foxglove/tsconfig/base",
	"compilerOptions": {
		// 设置 ES 目标版本 ES3 | ES5 | ES2015 | ES2016 | ... | ESNEXT
		"target": "es5",
		// 设置输出模块，commonjs | amd | system | umd | es2015
		"module": "commonjs",
		"lib": [],
		// 是否允许编译 javascript 文件
		"allowJs": true,
		"checkJs": true,
		// 设定 JSX 输出风格 preserve | react-native | react
		"jsx": "preserve",
		// 产生对应的 .d.ts 文件
		"declaration": true,
		"sourceMap": true,
		// 拼接为单个文件
		"outFile": "./",
		"outDir": "./",
		// 指定输入文件根目录，和 outDir 配套使用
		"rootDir": "./",
		"removeComments": true,
        // 不输出编译文件
		"noEmit": true,
		// 开启严格模式
		"strict": true,
		"noImplicitAny": true,
		"strictNullChecks": true,
		"noImplicitThis": true,
		"alwaysStrict": true
	},

	// 明确表示需要包含的文件
	"files": ["./some/file.ts"],

	// 确定包含和排除的文件，只有 files 不存在时才生效
	"include": ["./folder"],
	"exclude": ["./folder/**/*.spec.ts", "./folder/someSubFolder"]
}
</pre>

        <h2 id="declaration-spaces">3 声明空间</h2>

        <p>在 TypeScript 中存在两种声明空间：变量声明空间（variable declaration space）和类型声明空间（type declaration space）。</p>

        <p>类型声明空间包含的标识符可以当作类型，但不一定能作为变量。比如：</p>
<pre>class Foo {};
interface Bar {}
type Bas = {}
</pre>

        <p>而变量声明空间的标识符通常作为变量，一般不适合作为类型。比如：</p>
<pre>
class Foo {};
var someVar = Foo;
var someOtherVar = 123;
</pre>

        <h2 id="modules">4 模块</h2>

        <p>93/317</p>

        <h2>参考资料</h2>
        <ul>
            <li>
                <a href="https://www.typescriptlang.org/" target="_blank">
                    TypeScript: JavaScript With Syntax For Types
                </a> - TypeScript 官网
            </li>
            <li>
                <a href="https://github.com/basarat/typescript-book" target="_blank">
                    TypeScript Deep Dive
                </a> by <em>Basarat Ali Syed</em>
            </li>
        </ul>
    </body>
</html>
